import React, {} from 'react';
import {
  View,
  Text,
  Image,
  Button,
  TextInput,
  Alert,
  TouchableOpacity,
} from 'react-native';

import TImage from '../../components/TImage';
import TImageUpLoadMultiComponent from '../../components/TImageUpLoadMultiComponent';
import CommonStyles from '../../common/CommonStyles';
import SizeUtils from '../../common/SizeUtils';
import ToastUtils from '../../common/ToastUtils';
import Constants from '../../common/Constants';
import BasePage from '../common/BasePage';
import CommonMaskView from '../common/CommonMaskView';
import Config from '../../config';
import CommonShowViewFullScreenAction from '../../actions/common/CommonShowViewFullScreenAction';
import QZ_RequestCreateQunliaoAction from '../../actions/quanzi/QZ_RequestCreateQunliaoAction';

const NAME_DEFAULT = "4-15个字";
const DESC_DEFAULT = "10-100个字以内";
export default class QZ_QunliaoCreatePage extends BasePage  {
  constructor(props) {
    super(props);

    this.state.statusText = "";
    this.state.qunName = "";
    this.state.qunDesc = "";
    this.state.quanziData = this.props.pageData.routeData.quanziData;
    this._backgroudColor = "#ffffff00";
    this._fontColor = "#ffffff";
    this._viewWidth = SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80);

    this._imageComponent = null;
    this._imageUrls = [];
    this._goEdit = false;
  }

  _dealEnterPage() {
    this.state.quanziData = this.props.pageData.routeData.quanziData;
    this._goEdit = false;
  }

  _dealLeavePage() {
    if(this._goEdit === false) {
      this._imageUrls = [];
      this._imageComponent.reset();
      this.state.statusText = "";
      this.state.qunName = "";
      this.state.qunDesc = "";
    }
  }

  componentWillUpdate(nextProps, nextState) {
    if(nextState.createResult > 0) {
      
      new CommonShowViewFullScreenAction().call(this, null);
      if(nextState.createResult === 1) {
        // ToastUtils.show("创建成功");
        // this.gotoPage(Config.pages.qz_qunliao_chat);
        Alert.alert('提示','创建成功，需要等待审核通过才能使用',[
            {text:'确定',onPress:()=>{this.goBack()}}
          ])
      }
      else if(nextState.createResult === 2) {
        ToastUtils.show(nextState.statusText);
      }
      nextState.createResult = 0;
    }
  }

  render() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width, height:SizeUtils.getWindowSize().height}}>
        <View style={{flex:1}}>
          <TImage source={require("../../../resource/images/quanzi/Create_img_0.png")} style={{width:750, height:445}} />
          {this._renderImageUploadView()}
          <View style={{paddingLeft:SizeUtils.translateDesignWidthToCode(40),
            paddingRight:SizeUtils.translateDesignWidthToCode(40)}}>
            {this._renderName()}
            {this._renderDesc()}
            {this._renderTypes()}
          </View>
        </View>
        {this._renderNavigationBar()}
      </View>
    )
  }

  _renderImageUploadView() {
    let width = SizeUtils.getWindowSize().width;
    let height = SizeUtils.translateDesignWidthToCode(160);
    return(
      <View style={{width:width,
          height:height, marginTop:SizeUtils.translateDesignHeightToCode(30),
        flexDirection:"column", alignItems:"center"}}>
        <TImageUpLoadMultiComponent
          ref={(ref) => this._imageComponent = ref}
          style={{width:SizeUtils.translateDesignWidthToCode(160), height:height}}
          containerStyle={{width:width,
            height:height}}
          imageStyle={{width:160, height:160}} maxCount = {1}
          imageUrls={this._imageUrls}
          />
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#333333",
            paddingTop:SizeUtils.translateDesignHeightToCode(20)}}>
          群图标
        </Text>
      </View>
    )
  }

  _renderName() {
    return (
      <TouchableOpacity style={{flexDirection:"row", borderColor:"#eeeeee", alignItems:"center",
          backgroundColor:"#99999900", height:SizeUtils.translateDesignHeightToCode(160),
          width:this._viewWidth,
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3),
          paddingTop:SizeUtils.translateDesignHeightToCode(80)}} onPress={this._onPressName.bind(this)}>
        <Text style={{color:"#333333", fontSize:SizeUtils.translateFontSizeToCode(32),
            width:SizeUtils.translateDesignWidthToCode(100)}}>
          群名称
        </Text>
        <Text style={{color:this.state.qunName === "" ? "#999999" : "#333333", fontSize:SizeUtils.translateFontSizeToCode(32),
            paddingLeft:SizeUtils.translateDesignWidthToCode(26),
            width:this._viewWidth - SizeUtils.translateDesignWidthToCode(100)}}>
          {this.state.qunName === "" ? NAME_DEFAULT : this.state.qunName}
        </Text>
      </TouchableOpacity>
    )
  }

  _onPressName() {
    this._goEdit = true;
    this.gotoPage(Config.pages.common_input, {placeholder:NAME_DEFAULT, length:[4, 15], title:"群名称",
      callback:this._editNameCallback.bind(this)});
  }

  _editNameCallback(value) {
    this.setState({
      qunName:value,
    })
  }

  _renderDesc() {
    return (
      <TouchableOpacity style={{flexDirection:"row", borderColor:"#eeeeee",
          backgroundColor:"#99999900", height:SizeUtils.translateDesignHeightToCode(220),
          width:this._viewWidth,
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3),
          paddingTop:SizeUtils.translateDesignHeightToCode(28)}} onPress={this._onPressDesc.bind(this)}>
        <Text style={{color:"#333333", fontSize:SizeUtils.translateFontSizeToCode(28),
            width:SizeUtils.translateDesignWidthToCode(100)}}>
          群简介
        </Text>
        <Text style={{color:this.state.qunName === "" ? "#999999" : "#333333",
            fontSize:SizeUtils.translateFontSizeToCode(28),
            paddingLeft:SizeUtils.translateDesignWidthToCode(26),
            width:this._viewWidth - SizeUtils.translateDesignWidthToCode(100)}} numberOfLines={5}>
          {this.state.qunDesc === "" ? DESC_DEFAULT : this.state.qunDesc}
        </Text>
      </TouchableOpacity>
    )
  }


  //显示这个群聊所属的圈子的名称
  _renderTypes() {
    return (
      <View style={{flexDirection:"row",
          backgroundColor:"#99999900", height:SizeUtils.translateDesignHeightToCode(100),
          width:this._viewWidth,
          paddingTop:SizeUtils.translateDesignHeightToCode(28)}}>
        <Text style={{color:"#333333", fontSize:SizeUtils.translateFontSizeToCode(28),
            width:SizeUtils.translateDesignWidthToCode(100)}}>
          群类型
        </Text>
        <Text style={{color:this.state.qunName === "" ? "#999999" : "#333333",
            fontSize:SizeUtils.translateFontSizeToCode(28),
            paddingLeft:SizeUtils.translateDesignWidthToCode(26),
            width:this._viewWidth - SizeUtils.translateDesignWidthToCode(100)}} >
          {this.state.quanziData.title}
        </Text>
      </View>
    )
  }

  _onPressDesc() {
    this._goEdit = true;
    this.gotoPage(Config.pages.common_input, {placeholder:DESC_DEFAULT, length:[10, 100], title:"群简介",
      callback:this._editDescCallback.bind(this)});
  }

  _editDescCallback(value) {
    this.setState({
      qunDesc:value,
    })
  }

  _onPressNavigationBarRightBtn() {
    if(this.state.qunName === "") {
      ToastUtils.show("请填写群名称");
      return;
    }
    else if(this.state.qunDesc === "") {
      ToastUtils.show("请填写群描述");
      return;
    }
    else if(this._imageComponent.getCurrentImageDatas().length === 0) {
      ToastUtils.show("请上传群图标");
      return;
    }
    new CommonShowViewFullScreenAction().call(this, {component:CommonMaskView});
    this._imageComponent.doUpload(this._onUploadCallback.bind(this));
  }

  _onUploadCallback(imageUrls) {
    this._imageUrls = imageUrls;
    new QZ_RequestCreateQunliaoAction().call(this, {title:this.state.qunName,
      desc:this.state.qunDesc, board_id:this.state.quanziData.board_id, image_urls:imageUrls});
  }
};
